<template>
  <div class="page">
    <div class="container">
      <pub-search
        v-model:searchColumns="state.searchColumns"
        v-model:searchForm="state.searchForm"
        mask-append-to="table-container"
        @search="getPageData"
      ></pub-search>
      <div class="table-container">
        <pub-table
          ref="pubTable"
          :column="state.columns"
          :data="state.tableData"
          :loading="tableLoading"
        >
          <template v-slot:custom="scope">
            <span
              style="cursor: pointer; color: red"
              @click="detail(scope.row)"
            >
              请求参数
            </span>
          </template>
        </pub-table>
      </div>
      <pub-pagination
        :total="total"
        v-model:page="state.searchForm.pageNum"
        v-model:limit="state.searchForm.pageSize"
        @pagination="getPageData"
      />
    </div>
    <pub-dialog
      v-if="dialogShow"
      title="请求参数"
      v-model:visible="dialogShow"
      width="1000px"
    >
      <div class="edit-form edit-dialog">
        <el-descriptions :column="2" border :colon="true">
          <el-descriptions-item
            v-for="(item, key, index) in detailInfo[0]"
            :key="index"
          >
            <template #label>
              {{ key }}
            </template>
            <div>{{ item }}</div>
          </el-descriptions-item>
        </el-descriptions>

        <div class="btn-group">
          <el-button
            type="primary"
            class="btn-form-close"
            @click="dialogShow = false"
          >
            关闭
          </el-button>
        </div>
      </div>
      <!-- </dialog-content> -->
    </pub-dialog>
  </div>
</template>
  
  <script setup>
import { getSystemLogs } from '@/api/system.js'
import { ref, reactive, toRefs, onMounted, onBeforeMount, inject } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { appCurrentState } from '@/pinia/modules/app'
import { useUserStore } from '@/pinia/modules/user'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
const userStore = useUserStore()
const userAreaArr = userStore.userAreaArr
const orgInfo = userStore.orgInfo
const currentState = appCurrentState()
const dialogFormVisible_add = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const dialogShow = ref(false)
const state = reactive({
  searchColumns: [
    {
      label: '操作用户',
      el: 'Input',
      bind: 'realName',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '请求地址',
      el: 'Input',
      bind: 'url',
      defaultValue: '',
      labelWidth: 80
    }
  ],
  tableData: [],
  searchForm: {
    pageSize: 15,
    pageNum: 1
  },
  columns: [
    { label: '操作用户', prop: 'realName' },
    { label: '请求IP', prop: 'ip' },
    { label: '请求方式', prop: 'method' },
    { label: '请求地址', prop: 'url' },
    { label: '请求时间', prop: 'createDate' },
    { label: '请求参数', prop: 'params', type: 'custom' },
  ]
})

const changeComponents = inject('changeComponents')
const detailInfo = ref()

const detail = row => {
  dialogShow.value = true
  detailInfo.value = JSON.parse(row.params)
}

const areaChange = val => {
  state.searchForm.areaCode = val
}

const fetchList = () => {
  state.searchForm.pageNum = 1
  getPageData()
}

const getPageData = async () => {
  tableLoading.value = true
  let res = await getSystemLogs(state.searchForm)
  if (res.succeed) {
    state.tableData = res.data
    total.value = res.total
  }
  tableLoading.value = false
}

onBeforeMount(() => {
  getPageData()
})
</script>
  <style scoped>
/* 当列表有两行筛选条件使用 */
.table-container {
  height: calc(100% - 130px);
  flex: 1;
}
.table-container1 {
  height: calc(100% - 88px);
}
.table-web {
  height: 100% !important;
}
/* 当列表有两行筛选条件使用 */
</style>
  